<template>
  <div>
    <!-- <h1>新增地址</h1> -->
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      :address-info="json"

    >
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <span>标签</span>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="家">家</van-radio>
              <van-radio name="公司">公司</van-radio>
              <van-radio name="学校">学校</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
    </van-address-edit>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";

export default {
  data() {
    return {
      areaList,
      radio: "",
      detail: {},
      searchResult: [],
      json:{
        id:"",
        name:"",
        tel:"",
        province:"",
        city:"",
        county:"",
        addressDetail:"",
        areaCode:"",
        postalCode:"",
        isDefault:""
      }
    };
  },

  methods: {
    onSave(c) {
      // console.log(c);
      if (!this.$route.query.id) {
        console.log("这是新增");
        axios({
          url: "/api/addressadd",
          method: "post",
          data: {
            uid: JSON.parse(localStorage.getItem("userInfo")).uid,
            username: c.name,
            userphone: c.tel,
            regioncode: c.areaCode,
            location: c.province + c.city + c.county,
            useraddress: c.addressDetail,
            status: c.isDefault ? 1 : 0,
            label: this.radio,
          },
        }).then((res) => {
          // console.log(res);
          this.$router.push("/address");
          Toast("添加成功");
        });
      } else {
        console.log("这是修改");
        axios({
          url: "/api/addressedit",
          method: "post",
          data: {
            id: this.$route.query.id,
            username: c.name,
            userphone: c.tel,
            regioncode: c.postalCode,
            location: c.province + c.city + c.county,
            useraddress: c.addressDetail,
            status: c.isDefault ? 1 : 0,
            label: this.radio,
          },
        }).then((res) => {
          console.log(res);
          this.$router.push("/address");
          Toast("修改成功");
        });
      }
    },
    onDelete() {
      if (!this.$route.query.id) {
        Toast("已取消新增");
        this.$router.push("/address");
        return;
      }

      axios({
        url: "/api/addressremove",
        method: "post",
        data: {
          id: this.$route.query.id,
        },
      });
      Toast("删除成功");
      this.$router.push("/address");
    },
    onChangeDetail(val) {},
  },

  // 如果是修改一进来就渲染数据
  activated() {
    // 4.编辑进来了
    if (this.$route.query.id) {
      //此处是编辑进来的
      axios({
        url: "/api/addresslist",
        method: "get",
        params: {
          uid: JSON.parse(localStorage.getItem("userInfo")).uid,
          id: this.$route.query.id,
        },
      }).then((res) => {
        let detail = res.data.list[0];
        console.log(res.data.list[0]);

        this.json = {
          id:detail.id,
          name: detail.username,
          tel: detail.userphone,
          postalCode: detail.regioncode,
          addressDetail: detail.useraddress,
          isDefault: detail.status == 1,
          areaCode: detail.regioncode,
          // province:,
          // city:,
          // county:,
        };
        this.radio = detail.label;
      });
    }else{
      this.json = {
        id:"",
        name:"",
        tel:"",
        province:"",
        city:"",
        county:"",
        addressDetail:"",
        areaCode:"",
        postalCode:"",
        isDefault:""
      }
    }
  },
};
</script>

<style>
</style>